<!DOCTYPE html>
<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>Positionsbestimmung</title>
    
    <!-- Stylesheet -->
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
         
    <!-- Google Maps API --> 
	<script type="text/javascript" 
            src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    
    <script type="text/javascript">


	var geocoder;

	  function initialize() {
		  geocoder = new google.maps.Geocoder();
		var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
		
		
		  var myOptions = {
			zoom: 4,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		  }
		  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		  
		  google.maps.event.addListener(map, 'click', function(event) {
			placeMarker(event.latLng);
			
			document.getElementById("laenge").value = event.latLng.lng();
			document.getElementById("breite").value = event.latLng.lat();
			
			document.getElementById("marker").value = "new google.maps.LatLng("+event.latLng.lat()+","+event.latLng.lng()+")";

		  });
		}
		
		
		function codeAddress() {
			var address = document.getElementById("address").value;
			geocoder.geocode( { 'address': address}, function(results, status) {
			  if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				map.setZoom(15);
				var marker = new google.maps.Marker({
					map: map, 
					position: results[0].geometry.location
				});
			  } else {
				alert("Geocode was not successful for the following reason: " + status);
			  }
		});
		}
		
		  
		function placeMarker(location) {
		  var marker = new google.maps.Marker({
			  position: location, 
			  map: map
		  });
		  
		  
		  
		
		  map.setCenter(location);
		

	  }
</script>

</head>

<body onload="initialize()">

	<!-- Kartendarstellung -->
  	<div id="map_canvas">
    
    </div>
    
    <div id="ausgabe" style="width:494px; 
    font-family:'Trebuchet MS', sans-serif; 
	color:#777;
	font-weight:bold;
    padding-left:0px; 
    padding-top:0px; 
    position: absolute; 
    right: 17px; 
    top: 0px;
    background-color:#FAFAFE;  
    border: 4px solid #39F; 
	border-top:none;
    z-index: 2; ">
    
    	<p>
    	  <input name="laenge" type="text"  id="laenge" size="50" maxlength="50">Längengrad<br>

    	  <input name="breite" type="text" id="breite" size="50" maxlength="50">Breitengrad<br>
          <input name="marker" type="text" id="marker" size="50" maxlength="50">Marker
   	  </p>
        
      <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Geocode" onclick="codeAddress();">
  </div>
    </div>
    
   
    
</body>

</html>
